/**
 * 一、路由的基本配置
 * 1、下载react路由的依赖包
 * yarn add react-router-dom
 * 2、在项目的入口文件（main.jsx）
 * 使用BrowserRouter或者HashRouter来将App组件包裹起来
 * <BrowserRouter>
 *    <App/>
 * </BrowserRouter>
 * 3、在App.jsx中进行路由规则的配置
 * <Routes>
    <Route path='/login' element={<Login></Login>}></Route>
    <Route path='/register' element={<Register></Register>}></Route>
    <Route path='/' element={<Home></Home>}></Route>
  </Routes>
  二、路由跳转
  路由跳转的方式有两种
  1、声明式路由跳转方式：使用<Link>的方式进行路由跳转
  2、编程式路由跳转方式:使用useNavigate函数进行路由跳转
  三、常用的配置说明
  1、默认路由配置：index
  2、路由重定向：Navigate组件
  3、404页面的配置 *
  四、路由传参
  React中路由传参有三种方式
  1、query传参方式
  2、动态路由传参方式
  3、state方法
  1) 在Link标签上添加state属性，将要传递的数据携带过去
  2) 在目标页面中通过useLocation的方式来进行接收
  2.1）import {useLocation} from 'react-router-dom'
  2.2) const {state}=useLocation()
  2.2) 使用state
 */
import React from 'react'
import {Routes,Route,Navigate} from 'react-router-dom'
import Login from './views/Login'
import Register from './views/Register'
import Home from './views/Home'
import UserList from './views/sys/UserList'
import RoleList from './views/sys/RoleList'
import MenuList from './views/sys/MenuList'
import DistList from './views/sys/DistList'
import ProductType from './views/prod/ProductType'
import ProductList from './views/prod/ProductList'
import Dashboard from './views/Dashboard'
import NotFound from '@/views/NotFound'
import ProductUpdate from './views/prod/ProductUpdate'
import ProductDetail from './views/prod/ProductDetail'
export default function App() {
  return <Routes>
    <Route path='/login' element={<Login></Login>}></Route>
    <Route path='/register' element={<Register></Register>}></Route>
    <Route path='/' element={<Home></Home>}>
      {/* 
         Route中常用属性的含义
         index:是一个布尔值，如果为true，表示该路由是一个默认路由
         重定向element属性的JSX中使用<Navigate>这个组件
         配置404页面  
      */}
      <Route index element={<Navigate to={"dashboard"}></Navigate>}></Route>
      <Route path='dashboard' element={<Dashboard></Dashboard>}></Route>
      <Route path='userList' element={<UserList></UserList>}></Route>
      <Route path='roleList' element={<RoleList></RoleList>}></Route>
      <Route path='menuList' element={<MenuList></MenuList>}></Route>
      <Route path='distList' element={<DistList></DistList>}></Route>
      <Route path='productType' element={<ProductType></ProductType>}></Route>
      <Route path='productList' element={<ProductList></ProductList>}></Route>
      <Route path='productUpdate' element={<ProductUpdate></ProductUpdate>}></Route>
      <Route path='productDetail/:id' element={<ProductDetail></ProductDetail>}></Route>
    </Route>
    <Route path='*' element={<NotFound></NotFound>}></Route>
    
  </Routes>
}
